<template>
    <div class="d-flex justify-content-center align-items-center bg" style="height: 100vh">

        <div class="container">
          <div style="display: flex;justify-content: center;align-items: center;margin-bottom: 20px" class="changec">
            <span>2024年</span>
            <image :src="form.headimgurl" class="avatar"></image>
            <view class="nickname">{{form.nickname}}</view>
          </div>
            <div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        调查问卷
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>实施过程中的注意事项：</strong>
        在调查实施过程中要及时核查资料，‌检查所搜集的资料是否齐全、‌准确，‌留意数据中的数字是否正确，‌做到及时补救、‌更正，‌尽可能避免人为的错误。‌
问卷回收后，‌在剔除废卷后，‌要统计有效问卷的回收率。‌对于研究结论依据的问卷，‌回收率一般不应低于70%。‌
对回收问卷还要做回答偏斜（‌向）‌估计，‌以确保数据的可靠性。‌
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        样本选择
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        样本的选择应具有代表性，‌能够准确反应整个受访人群的特征和意见。‌样本的选择应该是随机的，‌以避免偏差和歧义。‌
      </div>
    </div>
  </div>

</div>
<div class="d-flex justify-content-center align-items-center" style="margin-top: 40px;"><button type="button" class="btn btn-primary" @click="login()">参与调查</button></div>

        </div>
        
    </div>
</template>
<script>
export default {
    name: 'Loginview',
    data() {
        return {
          form: {
                    nickname: '',
                    headimgurl: ''
                },
            username: '',
            password: ''
        }
    },

    onLoad() {
           // this.login()
        },
 
    methods: {
      getUrlCode(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            },
            async login() {
  
             //   const userInfo = localStorage.getStorageSync("userinfo")
            //    if (!this.$utils.isNull(userInfo)) {
            //        this.form = userInfo
           //     } else {
                    // 获取url上的code
                    let code = this.getUrlCode('code')
                    console.log(code)
                    if (code) {
                        //授权登录
                        const res = await this.$api.WeChatLogin({
                            'weChatCode': code
                        });

                        if (res.data.rcrm.RC == "1") {
                            this.$u.toast("授权成功")
                            this.form = res.data.results.user_data;
                         //   localStorage.setStorageSync('userinfo', res.data.results.user_data)
                        } else {
                            this.$u.toast('授权失败：' + res.data.rcrm.RM)
                        }
                    } else {
                        // code 不存在，走微信网页授权逻辑 
                        // 当前网页的url，供微信重定向使用 
                        let loc_href = encodeURIComponent(window.location.href);
                       // let loc_href='http://10.0.72.107:15080/system/api/client/login'
                        // this.$config.weChat.appID 为微信公众号的appid 
                        let appid='wx77a68f988e228ebd'
                        let wxUrl =
                            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect\_uri=${loc_href}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
                      console.log(wxUrl)
                        // 跳转链接获取code 
                        location.href = wxUrl
                    }
               // }
            },
    goToHome() {
      this.$router.push('/list');
    },
    
    }
}
</script>
<style>
.changec span{

  display: inline-block;

  color: #000;
  margin: 0 5px;
  font-size: 32px;
  animation: changeColor 2s infinite alternate;
}
@keyframes changeColor {
  0% {
   color: #000;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #000;
  }
}
.bg{
  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
  background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
  background-image: linear-gradient(to right, #434343 0%, black 100%);
  background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
  background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
  background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
  background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);
  background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
  background-image: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);
  background-image: linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%);
  background-image: linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
  background-image: linear-gradient(-225deg, #7742B2 0%, #F180FF 52%, #FD8BD9 100%);
}


</style>